<template>
    <el-container class="project-role-view">
       <el-main>
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
           <div style="margin: 15px 0;"></div>
           <el-checkbox-group v-model="roles" @change="handleCheckedRoleChange">
               <el-checkbox v-for="role in roles" :label="" :key="city">{{city}}</el-checkbox>
           </el-checkbox-group>
           <el-form>
               <el-form-item label="添加角色">
               <el-input v-model="roleName">
               </el-input>
               <el-button title="添加角色" icon="el-icon-plus" circle @click="addRole"></el-button>
               </el-form-item>
           </el-form>
       </el-main>
        <el-footer>
            <el-button @click="saveProjectRoleSetting">保存</el-button>
            <el-button>取消</el-button>
        </el-footer>
    </el-container>
</template>
<script>
    export default {
        name: 'ProjectRole',
        props: {
            projectId: String
        },
        data() {
            return {
                checkAll: '',
                projectId: '',
                roleName: '',
                roles: []
            }
        },
        methods: {
            loadRoleList: function() {
                // todo 发送请求加载全局角色信息
                // todo 发送请求加载此项目绑定的角色信息
            },
            addRole: function() {
                // todo 发送请求添加角色
                this.roleName = '';
                this.loadRoleList();
            },
            saveProjectRoleSetting: function() {
                // todo 发送请求配置此项目绑定的角色信息
            },
            handleCheckAllChange: function() {},
            handleCheckRoleChange: function() {}
        }
    }
</script>
<style lang="scss" scoped>
    .role-person-view {

        .role-box {
            span {
                margin-left: 0.1rem;
                margin-right: 0.1rem;
            }

            .person-item {

            }

            .btn{
                margin-left: 0.2rem;
            }
        }
    }
</style>
